<template>
  <div class="star" :class="starType">
    <span
      v-for="(itemClass, index) in itemClasses"
      :class="itemClass"
      class="star-item"
      :key="index"
    ></span>
  </div>
</template>

<script>
// 定义常量
const LENGTH = 5;
const CLS_ON = "on";
const CLS_OFF = "off";
const CLS_HALF = "half";

export default {
  props: {
    // 尺寸
    size: {
      type: Number,
      default() {
        return 32;
      }
    },
    // 评分
    score: {
      type: Number,
      default() {
        return 5;
      }
    }
  },
  computed: {
    // 星星尺寸
    starType() {
      return "star-" + this.size;
    },
    // 按照分数显示不同的星星： 全星，半星，灰星
    itemClasses() {
      // 使用数组的原因是数组是有序集合
      let result = [];
      // 4.5 <= score < 5 时 是半颗星
      // 4 < score < 4.5 时，是灰星

      // 整颗星星数量为
      const onStarCount = Math.floor(this.score);
      // 向数组中添加 整颗星星的类名
      for (let i = 0; i < onStarCount; i++) {
        result.push(CLS_ON);
      }
      // 看分数是否会添加半颗星
      // 将传递过来的分数乘以2，再对结果做向下取整，用这个整数去除以2，除以2的结果如果不是整数说明原始分数 为 x.5 <= score < x+1
      // 获取新的分数
      const newScore = Math.floor(this.score * 2) / 2;
      // 判断是否在 0.5~0.9 之间
      // 对 1 求余
      const hasHalfStar = newScore % 1 !== 0;
      // 如果成立
      if (hasHalfStar) {
        // 添加半颗星
        result.push(CLS_HALF);
      }
      // 如果数组元素数量不足5个则添加灰色星星
      while (result.length < LENGTH) {
        result.push(CLS_OFF);
      }
      console.log(result);
      return result;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import "~common/stylus/mixin"

.star
  font-size 0
  .star-item
    // display flex
    display inline-block
    background-repeat no-repeat
// 大尺寸五角星
&.star-48
  .star-item
    width 20px
    height 20px
    margin-right 22px
    background-size 20px 20px
    &:last-child
      margin-right 0
    &.on
      bg-image('images/star48_on')
    &.off
      bg-image('images/star48_off')
    &.half
      bg-image('images/star48_half')
// 普通尺寸五角星
&.star-32
  .star-item
    width 15px
    height 15px
    margin-right 6px
    background-size 15px 15px
    &:last-child
      margin-right 0
    &.on
      bg-image('images/star36_on')
    &.off
      bg-image('images/star36_off')
    &.half
      bg-image('images/star36_half')
// 小尺寸五角星
&.star-24
  .star-item
    width 10px
    height 10px
    margin-right 3px
    background-size 10px 10px
    &:last-child
      margin-right 0
    &.on
      bg-image('images/star24_on')
    &.off
      bg-image('images/star24_off')
    &.half
      bg-image('images/star24_half')
</style>
